<template>
	<view class="claim-container">
		<u-field
			v-model="claimData.real_name"
			label="真实姓名"
			placeholder="请输入真实姓名"
		>
		</u-field>
		<u-field
			v-model="claimData.mobile"
			label="手机号"
			placeholder="请输入手机号"
		>
		</u-field>
		<u-row style="padding: 16px; box-sizing: border-box;">
			<u-button
				type='primary'
				@click="toClaimStaff"
			>
				认领员工
			</u-button>
		</u-row>
	</view>
</template>

<script>
	import { claimStaff } from '../../util/request.js'
	export default {
		data() {
			return {
				claimData: {
					real_name: '', // 真实姓名
					mobile: '' // 手机号
				}
			};
		},
		methods: {
			toClaimStaff () {
				if (this.claimData.real_name === '' || this.claimData.mobile === '') {
					uni.showToast({
						icon: 'error',
						title: '真实姓名或手机号不能为空'
					})
					return
				}
				uni.showLoading({
					title: '请求服务器...'
				})
				claimStaff(this.claimData).then(res => {
					const { data, code, msg } = res.data
					if (code === 0) {
						// 这里直接提示服务器的错误信息
						uni.showToast({
							icon: 'error',
							title: msg
						})
						return
					}
					uni.showToast({
						icon: 'success',
						title: '员工认领成功！'
					})
					this.claimData.mobile = ''
					this.claimData.real_name = ''
				}).catch(e => {
					uni.showToast({
						icon: 'error',
						title: '操作失败！'
					})
					console.error(e)
				})
			}
		}
	}
</script>

<style lang="less">

</style>
